<!--
 * @Descripttion: 带客设置
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2022-01-11 14:28:22
-->
<template>
  <div class="lb-edit-card">
    <top-nav :isBack="true"></top-nav>
    <div class="page-main">
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        ref="subForm"
        :rules="subFormRules"
        label-width="140px"
        class="basic-form"
      >
        <el-form-item
          label="名片页显示图片"
          prop="passenger_cover"
          style="margin-bottom: 0"
        >
          <lb-cover
            :fileList="subForm.passenger_cover"
            @selectedFiles="getCover"
          ></lb-cover>
          <lb-tool-tips>图片建议尺寸: 150 * n</lb-tool-tips>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :plain="true" @click="submitFormInfo(2)">{{
            $t('action.defaultImg')
          }}</el-button>
        </el-form-item>

        <el-form-item label="指定核销人" prop="passenger_hx_type">
          <el-radio-group v-model="subForm.passenger_hx_type">
            <el-radio :label="0">全部员工核销</el-radio>
            <el-radio :label="1">指定员工核销</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label
          prop="passenger_hx_user"
          v-if="subForm.passenger_hx_type === 1"
        >
          <el-select
            v-model="subForm.passenger_hx_user"
            multiple
            filterable
            clearable
            collapse-tags
            placeholder="请指定核销员工"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <lb-button @click="submitFormInfo(1)" type="primary">{{
            $t('action.save')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateUser = (rule, value, callback) => {
      if (this.subForm.passenger_hx_type === 0) {
        callback()
      } else if (value.length === 0) {
        callback(new Error(`请指定核销员工`))
      } else {
        callback()
      }
    }
    return {
      // 基本信息
      subForm: {
        passenger_cover: [],
        passenger_hx_type: 0,
        passenger_hx_user: []
      },
      subFormRules: {
        passenger_cover: {
          required: true,
          type: 'array',
          message: '请上传图片',
          trigger: 'change'
        },
        passenger_hx_type: {
          required: true,
          type: 'number',
          message: '请指定核销人',
          trigger: 'change'
        },
        passenger_hx_user: {
          required: true, validator: validateUser, trigger: 'blur'
        }
      },
      options: [],
      value: [],
      loading: false
    }
  },
  async created () {
    await this.getDynInfo()
    await this.getDetail()
  },
  methods: {
    async getDynInfo () {
      let { data } = await this.$api.getBaseStaffInfo()
      this.options = data
    },
    getCover (imgs) {
      this.subForm.passenger_cover = imgs
    },
    async getDetail () {
      let { code, data } = await this.$api.presentDefaultSetting()
      if (code !== 200) return
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
      this.subForm.passenger_cover = [{ url: data.passenger_cover }]
    },
    async submitFormInfo (type) {
      if (type === 2) {
        this.subForm.passenger_cover = [
          {
            url:
              'https://lbqny.migugu.com/longbing_card/passenger/click_get_coupon.gif'
          }
        ]
      }
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          let subForm = JSON.parse(JSON.stringify(this.subForm))
          subForm.passenger_cover = subForm.passenger_cover[0].url
          this.$api.presentDefaultSetting(subForm).then(res => {
            if (res.code !== 200) return
            this.$message.success(this.$t('tips.successSub'))
            if (type === 1) return
            this.getDetail()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-edit-card {
  width: 100%;
  .el-input,
  .el-select,
  .lb-input-number,
  .el-cascader {
    width: 300px;
  }
}
</style>
